<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消防系统监控</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        .fire-monitor {
            padding: 20px;
        }

        .param-card {
            margin-bottom: 20px;
        }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .status-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .status-item .icon {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 10px;
        }

        .status-item .label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .status-item .value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }

        .status-item .unit {
            color: #909399;
            font-size: 12px;
        }

        .device-status {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            padding: 15px;
        }

        .device-card {
            background: #fff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .device-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .device-header i {
            font-size: 24px;
            margin-right: 10px;
            color: #409EFF;
        }

        .device-title {
            margin: 0;
            font-size: 16px;
            color: #303133;
        }

        .device-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .device-data {
            text-align: center;
        }

        .device-data .label {
            color: #909399;
            font-size: 12px;
        }

        .device-data .value {
            color: #303133;
            font-size: 16px;
            font-weight: bold;
        }

        .chart-container {
            height: 400px;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .data-record {
            padding: 20px;
        }

        .record-card {
            margin-bottom: 20px;
        }

        .time-selector {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="fire-system">
        <el-tabs v-model="activeTab">
            <!-- 设备监测标签页 -->
            <el-tab-pane label="设备监测" name="monitor">
                <div class="fire-monitor">
                    <!-- 消防水泵状态 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>消防水泵状态</span>
                        </div>
                        <div class="status-grid">
                            <div class="status-item">
                                <i class='bx bx-water icon'></i>
                                <div class="label">1#消防水泵</div>
                                <el-tag type="success">正常待机</el-tag>
                                <div class="value">0.62</div>
                                <div class="unit">MPa</div>
                            </div>
                            <div class="status-item">
                                <i class='bx bx-water icon'></i>
                                <div class="label">2#消防水泵</div>
                                <el-tag type="success">正常待机</el-tag>
                                <div class="value">0.61</div>
                                <div class="unit">MPa</div>
                            </div>
                            <div class="status-item">
                                <i class='bx bx-water icon'></i>
                                <div class="label">稳压泵</div>
                                <el-tag type="success">运行中</el-tag>
                                <div class="value">0.60</div>
                                <div class="unit">MPa</div>
                            </div>
                            <div class="status-item">
                                <i class='bx bx-water icon'></i>
                                <div class="label">水箱液位</div>
                                <el-progress type="dashboard" :percentage="95"></el-progress>
                                <div class="unit">储水量：95%</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 探测器状态 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>探测器状态</span>
                        </div>
                        <div class="device-status">
                            <div class="device-card" v-for="device in detectors" :key="device.id">
                                <div class="device-header">
                                    <i :class="device.icon"></i>
                                    <h3 class="device-title">{{device.name}}</h3>
                                </div>
                                <el-progress :percentage="device.onlineRate" :color="device.onlineRate >= 90 ? '#67C23A' : '#E6A23C'"></el-progress>
                                <div class="device-info">
                                    <div class="device-data">
                                        <div class="label">在线数量</div>
                                        <div class="value">{{device.online}}/{{device.total}}</div>
                                    </div>
                                    <div class="device-data">
                                        <div class="label">告警数量</div>
                                        <div class="value" :style="{color: device.alarm > 0 ? '#F56C6C' : '#67C23A'}">{{device.alarm}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 应急照明状态 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>应急照明状态</span>
                        </div>
                        <div class="status-grid">
                            <div class="status-item" v-for="light in emergencyLights" :key="light.id">
                                <i class='bx bx-bulb icon'></i>
                                <div class="label">{{light.location}}</div>
                                <el-tag :type="light.status === '正常' ? 'success' : 'danger'">{{light.status}}</el-tag>
                                <div class="value">{{light.battery}}</div>
                                <div class="unit">电量</div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>

            <!-- 数据记录标签页 -->
            <el-tab-pane label="数据记录" name="record">
                <div class="data-record">
                    <!-- 火警记录查询 -->
                    <el-card class="record-card">
                        <div slot="header">
                            <span>火警记录查询</span>
                            <el-button style="float: right" type="text">导出记录</el-button>
                        </div>
                        <el-table :data="fireAlarms" style="width: 100%">
                            <el-table-column prop="time" label="报警时间"></el-table-column>
                            <el-table-column prop="location" label="报警位置"></el-table-column>
                            <el-table-column prop="type" label="报警类型"></el-table-column>
                            <el-table-column prop="device" label="报警设备"></el-table-column>
                            <el-table-column prop="handler" label="处理人"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'">
                                        {{scope.row.status}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 设备故障统计 -->
                    <el-card class="record-card">
                        <div slot="header">
                            <span>设备故障统计</span>
                            <el-radio-group v-model="timeRange" size="small" style="float: right">
                                <el-radio-button label="month">月度</el-radio-button>
                                <el-radio-button label="quarter">季度</el-radio-button>
                                <el-radio-button label="year">年度</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="chart-container">
                            <div style="color: #909399; text-align: center; line-height: 400px;">
                                此处显示设备故障统计图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 维保记录管理 -->
                    <el-card class="record-card">
                        <div slot="header">
                            <span>维保记录管理</span>
                            <el-button style="float: right" type="text">导出记录</el-button>
                        </div>
                        <el-table :data="maintenanceRecords" style="width: 100%">
                            <el-table-column prop="time" label="维保时间"></el-table-column>
                            <el-table-column prop="type" label="维保类型"></el-table-column>
                            <el-table-column prop="devices" label="维保设备"></el-table-column>
                            <el-table-column prop="operator" label="维保人员"></el-table-column>
                            <el-table-column prop="result" label="维保结果">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.result === '正常' ? 'success' : 'warning'">
                                        {{scope.row.result}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#fire-system',
            data() {
                return {
                    activeTab: 'monitor',
                    timeRange: 'month',
                    detectors: [
                        {
                            id: 1,
                            name: '火警探测器',
                            icon: 'bx bx-flame',
                            onlineRate: 98,
                            online: 196,
                            total: 200,
                            alarm: 0
                        },
                        {
                            id: 2,
                            name: '燃气探测器',
                            icon: 'bx bx-wind',
                            onlineRate: 95,
                            online: 95,
                            total: 100,
                            alarm: 1
                        },
                        {
                            id: 3,
                            name: '烟感探测器',
                            icon: 'bx bx-cloud',
                            onlineRate: 97,
                            online: 97,
                            total: 100,
                            alarm: 0
                        }
                    ],
                    emergencyLights: [
                        { id: 1, location: '一层走道', status: '正常', battery: '95%' },
                        { id: 2, location: '二层走道', status: '正常', battery: '92%' },
                        { id: 3, location: '三层走道', status: '正常', battery: '88%' },
                        { id: 4, location: '安全出口', status: '正常', battery: '90%' }
                    ],
                    fireAlarms: [
                        {
                            time: '2024-01-20 15:30:00',
                            location: '2号楼3层',
                            type: '烟感报警',
                            device: '烟感探测器',
                            handler: '王工',
                            status: '已处理'
                        }
                    ],
                    maintenanceRecords: [
                        {
                            time: '2024-01-15',
                            type: '月度检查',
                            devices: '火警探测器、应急照明',
                            operator: '李工',
                            result: '正常'
                        }
                    ]
                }
            }
        })
    </script>
</body>
</html> 